<script setup lang="ts">
import myAxios from "../plugins/myAxios.ts";
import {ref, watchEffect} from "vue";

interface Post {
  id: string;
  title: string;
  content: string;
  hasThumb: boolean;
  thumbNum: number;
  viewNum: number;
  user: {
    userName: string;
  }
  tagList: string[];
}
const props = defineProps({
  post: {
    type: Object as () => Post,
    required: true
  }
});

const thumbs = ref(props.post?.thumbNum)
const hasThumb = ref(props.post?.hasThumb)
const viewNum = ref(props.post?.viewNum)
watchEffect(() => {
  console.log(props.post?.viewNum)
  viewNum.value = props.post?.viewNum
})
const doThumb = async () => {
  console.log('doThumb')
  console.log(props.post?.id)
  const res = await myAxios.post('/post_thumb/', {
    postId: props.post?.id
  })
  if (res.code === 0) {
    if (res.data === -1) {
      thumbs.value -= 1
    }else {
      thumbs.value = res.data
    }
    hasThumb.value = !hasThumb.value
  }
}
</script>

<template>
  <div id="fly-post">
    <a-card>
      <template #actions>
        <span class="icon-hover" @click.stop="doThumb" :class="{'icon-selected': hasThumb}"> <IconThumbUp/> {{
            thumbs
          }} </span>
        <span class="icon-hover"> <icon-eye/> {{ viewNum }}</span>
      </template>
      <a-card-meta :title="post.title">
        <template #description>
          <a-typography-paragraph :ellipsis="{ rows: 1}">
            {{ post.content }}
          </a-typography-paragraph>
        </template>
        <template #avatar>
          <a-typography-text>{{ post.user.userName ?? "匿名" }}</a-typography-text>
          <a-divider direction="vertical"/>
          <div class="tags">
            <a-tag color="arcoblue" v-for="tag in post.tagList">{{ tag }}</a-tag>
          </div>
        </template>
      </a-card-meta>
    </a-card>
  </div>
</template>

<style scoped>
#fly-post {
  border: 0;
  cursor: pointer;
}

#fly-post :deep(.arco-card) {
  background-color: #FFFFFF;
  border: none;
  border-bottom: 1px solid #EBEEF5;
}

#fly-post :deep(.arco-card):hover {
  background-color: #F7F8FA;
}

:deep(.arco-card-meta-title) {
  color: #252933;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

:deep(.arco-typography) {
  color: #949AA7;
}

.tags {
  display: inline-block;
}

.tags span {
  border-left: 1px solid #EBEEF5;
  margin: 0 5px;
}

.tags span:hover {
  background-color: #BEDAFF;
}

.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  border-radius: 50%;
  transition: all 0.1s;
}

.icon-hover:hover {
  background-color: rgb(var(--gray-2));
}

.icon-selected {
  color: #165DFF;
}
</style>